<template>
  <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-md">
    <!-- 标题区域 - 使用校园风格的渐变 -->
    <div class="bg-gradient-to-r from-[#8b63e9] to-[#fa3f5b] p-4 text-white relative overflow-hidden">
      <!-- 装饰性背景图案 -->
      <div class="absolute inset-0 opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" fill="none">
          <path d="M20 20 L30 10 L40 20 L30 30 Z" fill="currentColor"/>
          <path d="M70 30 L80 20 L90 30 L80 40 Z" fill="currentColor"/>
          <path d="M60 70 L70 60 L80 70 L70 80 Z" fill="currentColor"/>
          <path d="M20 80 L30 70 L40 80 L30 90 Z" fill="currentColor"/>
        </svg>
      </div>
      
      <div class="relative flex items-center justify-between">
        <div class="flex items-center">
          <div class="bg-white/20 backdrop-blur-sm rounded-full p-2 mr-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
          </div>
          <div>
            <h2 class="text-lg font-bold">我的关注</h2>
            <p class="text-sm opacity-90">{{ users.length }} 位好友</p>
          </div>
        </div>

      </div>
    </div>

    <!-- 用户列表 -->
    <div class="p-4 space-y-3 bg-[#F8F9FA]">
      <div v-for="user in displayedUsers" :key="user.id" 
           class="group relative bg-white rounded-xl p-4 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-pointer border border-gray-50"
           style="box-shadow: 0 4px 12px rgba(0,0,0,0.08);"
           @click="handleUserClick(user.id)">
        
        <!-- 用户信息 -->
        <div class="flex items-start space-x-3">
          <!-- 头像区域 -->
          <div class="relative flex-shrink-0">
            <div class="w-14 h-14 rounded-full bg-gradient-to-br  p-0.5">
              <img :src="user.avatar" :alt="user.name" 
                   class="w-full h-full rounded-full object-cover bg-white">
            </div>
            
            <!-- 性别标识 -->
            <div v-if="user.gender"
                 class="gender-badge absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-white text-xs shadow-md border-2 border-white"
                 :class="user.gender === 'male' ? 'bg-blue-500' : 'bg-pink-400'">
              {{ user.gender === 'male' ? '♂' : '♀' }}
            </div>
          </div>

          <!-- 用户详情 -->
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <h3 class="text-lg font-bold text-gray-800 truncate mr-2">{{ user.name }}</h3>
              </div>
              <button 
                @click.stop="handleFollowClick(user.id)"
                :class="[
                  'px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 transform hover:scale-105 shadow-sm hover:shadow-md flex items-center space-x-1',
                  user.isFollowing 
                    ? 'bg-gray-300 text-gray-500 cursor-default hover:scale-100 hover:shadow-sm' 
                    : 'bg-gradient-to-r from-emerald-400 to-cyan-400 text-white hover:from-emerald-500 hover:to-cyan-500'
                ]"
              >
                <svg v-if="user.isFollowing" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <span>{{ user.isFollowing ? "已关注" : "关注" }}</span>
              </button>
            </div>

            <!-- 学校信息 -->
            <div class="flex items-center text-xs text-gray-600 mb-1.5">
              <svg class="w-3 h-3 mr-1 text-[#62dbb7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
              </svg>
              <span class="truncate">{{ user.school }}</span>
              <span class="mx-1">·</span>
              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span class="text-[#fcc14a] font-medium">{{ user.ipLocation || '未知' }}</span>
            </div>

            <!-- 专业班级 -->
            <div class="flex items-center text-xs text-gray-500 mb-2">
              <svg class="w-3 h-3 mr-1 text-[#8b63e9]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
              </svg>
              <span class="truncate">{{ user.major }} · {{ user.className || '未知班级' }}</span>
            </div>

            <!-- 最近活动和IP属地 -->
            <div class="flex items-center justify-between text-xs text-gray-400">
              <div v-if="user.lastActivity" class="flex items-center">
                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              <span>IP属地: {{ user.ipLocation || '未知' }}</span>
            </div>
          </div>
        </div>

        <!-- 悬停效果装饰 -->
        <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#8b63e9]/5 to-[#fa3f5b]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
      </div>

      <!-- 空状态 -->
      <div v-if="users.length === 0" class="text-center py-8">
        <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#8b63e9] to-[#fa3f5b] rounded-full flex items-center justify-center">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
        </div>
        <p class="text-gray-500 font-medium">还没有关注任何人</p>
        <p class="text-sm text-gray-400 mt-1">去发现一些有趣的朋友吧</p>
      </div>

      <!-- 查看更多按钮 -->
      <div v-if="users.length > displayLimit && !showAll" class="mt-4">
        <button @click="showAll = true" 
                class="w-full py-3 text-sm font-medium text-center text-[#8b63e9] bg-gradient-to-r from-[#8b63e9]/10 to-[#fa3f5b]/10 rounded-xl hover:from-[#8b63e9]/20 hover:to-[#fa3f5b]/20 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#8b63e9] focus:ring-opacity-50">
          查看全部 ({{ users.length }} 人)
        </button>
      </div>

      <!-- 收起按钮 -->
      <div v-if="showAll && users.length > displayLimit" class="mt-4">
        <button @click="showAll = false" 
                class="w-full py-2 text-sm font-medium text-center text-gray-600 hover:text-[#8b63e9] transition-colors duration-200 focus:outline-none">
          收起
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { defaultUsers } from "@/mock/users";

export default {
  name: "FollowingUsers",
  props: {
    externalUsers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      displayLimit: 5,
      showAll: false,
      defaultUsers: defaultUsers.map(user => ({
        ...user,
        isOnline: Math.random() > 0.6,
        isFollowing: true
      }))
    };
  },
  computed: {
    users() {
      return this.externalUsers.length > 0 ? this.externalUsers : this.defaultUsers;
    },
    displayedUsers() {
      return this.showAll ? this.users : this.users.slice(0, this.displayLimit);
    },
  },
  methods: {
    handleUserClick(userId) {
      this.$emit('user-click', userId);
      console.log('用户点击:', userId);
    },
    handleFollowClick(userId) {
      const user = this.users.find(u => u.id === userId);
      if (user) {
        user.isFollowing = !user.isFollowing;
      }
      
      this.$emit('follow', userId);
      console.log('关注状态切换:', userId, user ? user.isFollowing : 'unknown');
    },
  }
};
</script>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: #8b63e9;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #fa3f5b;
}

/* 卡片悬停动画 */
.group:hover {
  animation: cardFloat 0.3s ease-out;
}

@keyframes cardFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1.02); }
}

/* 在线状态动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.follower-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 减少间距 */
  padding: 0.5rem 1rem; /* 减少内边距 */
  border-radius: 0.75rem; /* 12px */
  background-color: rgba(249, 250, 251, 0.7);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
  cursor: pointer;
}

.follower-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  background-color: white;
  border-color: transparent;
}

.follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  min-width: 90px;
}

.follow-btn.not-following {
  background-color: #0ab446; /* red-500 */
  color: white;
}

.follow-btn.not-following:hover {
  background-color: #4fc812; /* red-600 */
  transform: scale(1.05);
}

.follow-btn.following {
  background-color: #e5e7eb; /* gray-200 */
  color: #4b5563; /* gray-600 */
}

.follow-btn.following:hover {
  background-color: #d1d5db; /* gray-300 */
}
</style>
